<template>

  <curd-component :config="config" ref="RefTestComponent"></curd-component>
  <!--  <div id="container" style="height: 1000px;border: 2px solid #f00;width:800px;"></div>-->
  <!--  <div id="js-properties-panel" class="panel"></div>
    {{ listAll }}-->
  <a-modal v-model:visible="visible" :title="isAdd?'新增':'编辑'" @ok="handleOk">
    <a-form :model="formState">
      <a-form-item label="用户名">
        <a-input v-model:value="formState.username"/>
      </a-form-item>
      <a-form-item label="密码" v-if="isAdd">
        <a-input v-model:value="formState.password"/>
      </a-form-item>
      <a-form-item label="邮件">
        <a-input v-model:value="formState.email"/>
      </a-form-item>
      <a-form-item label="城市">
        <a-input v-model:value="formState.city"/>
      </a-form-item>
      <a-form-item label="城市">
        <a-checkbox-group v-model:value="formState.roles">
          <a-checkbox :value="item.id" v-for="item in rolesList">{{ item.name }}</a-checkbox>
        </a-checkbox-group>
      </a-form-item>


    </a-form>
  </a-modal>
</template>

<script lang="ts">
import CurdComponent from "@/components/CurdComponent.vue";
import {message} from 'ant-design-vue';
import {CurdBaseInterface} from "@/plugs/interface";
import {defineComponent, ref, provide, UnwrapRef, reactive, toRefs, onMounted} from "vue";
import {getCurdlist, adduser, getRoles, exportUser, delUser, updateUser, getCurdlist1} from "@/http/mockTest";

import {markRaw} from 'vue';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import BpmnModeler from 'bpmn-js/lib/Modeler';

import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';
//import propertiesPanelModule from 'bpmn-js-properties-panel'
//import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
//import camundaModdleDescriptor from 'camunda-bpmn-moddle'


const cache = {
  username: '',
  password: '',
  email: '',
  city: '',
  roles: [],
}


export default defineComponent({
  setup() {
    const RefTestComponent: any = ref(null)
    const State: any = reactive({
      rolesList: [],
      formState: JSON.parse(JSON.stringify(cache)),
      listAll: {},
      containerEl: "",
      bpmnModeler: ""
    });
    const visible = ref<boolean>(false);

    const isAdd = ref<number>(1);


    const sendGrandson = function (a: any) {
      console.log(a)
    }
    provide('addBtn', sendGrandson)
    const add = () => {
      isAdd.value = 1
      State.formState = JSON.parse(JSON.stringify(cache))
      visible.value = true
    }

    const editFn = (data) => {
      isAdd.value = 0
      State.formState = data
      State.formState.roles = data.sysRoles.map(i => Number(i.roleId))
      visible.value = true
    }
    const handleOk = () => {

      if (isAdd.value) {
        adduser(State.formState).then(res => {
          message.info('添加成功');
          visible.value = false
          RefTestComponent.value.getData();
        })
      } else {
        updateUser(State.formState).then(res => {
          message.info('修改成功');
          visible.value = false
          RefTestComponent.value.getData();
        })
      }

    }


    getRoles().then((res: any) => {
      State.rolesList = res

    })

    getCurdlist1().then((res: any) => {
      State.listAll = res

    })


    onMounted(async () => {
      getCurdlist1();


      State.containerEl = document.getElementById('container');
      // 加markRaw去除双向绑定作用域
      State.bpmnModeler = markRaw(new BpmnModeler({
        container: State.containerEl,
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        // 右侧属性面板
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule
        ],
        /*moddleExtensions: {
          camunda: camundaModdleDescriptor
        }*/

      }));
      State.bpmnModeler.createDiagram(() => {
        State.bpmnModeler.get('canvas').zoom('fit-viewport');
      });


      State.bpmnModeler.importXML(`<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.activiti.org/processdef">
  <process id="abnormal-bran-staff" name="异常监控-分公司普通员工" isExecutable="true">
    <documentation>分公司普通员工 异常监控流程图</documentation>
    <startEvent id="startEvent1" name="start"/>
    <userTask id="sid-A63ADD5F-D101-4308-8DDC-80110EBB6C4A" name="分公司合规经理">
      <extensionElements>
        <activiti:formProperty id="userConditionRule" name="找人规则" type="string" expression="{&quot;data&quot;:[{&quot;condition&quot;:{&quot;input&quot;:&quot;1&quot;},&quot;getRule&quot;:[{&quot;roleId&quot;:[&quot;22&quot;],&quot;orgRelation&quot;:&quot;orgGradeTwo&quot;}]},{&quot;condition&quot;:{&quot;input&quot;:&quot;0&quot;},&quot;getRule&quot;:[{&quot;roleId&quot;:[&quot;22&quot;],&quot;orgRelation&quot;:&quot;orgGradeTwo&quot;}]}]}"/>
        <activiti:formProperty id="nodeType" name="节点类型 1-最初节点" type="string" expression="1"/>
      </extensionElements>
    </userTask>
    <endEvent id="sid-9E7EAD98-4CE4-4CC2-A9C3-2FAD61395C1B" name="end"/>
    <userTask id="sid-7DB62F0E-350E-4AC3-886E-AF8F04D2F248" name="分公司负责人">
      <extensionElements>
        <activiti:formProperty id="userConditionRule" name="找人规则" type="string" expression="{&quot;data&quot;:[{&quot;condition&quot;:{&quot;input&quot;:&quot;b&quot;},&quot;getRule&quot;:[{&quot;roleId&quot;:[&quot;2&quot;],&quot;orgRelation&quot;:&quot;orgGradeTwo&quot;}]},{&quot;condition&quot;:{&quot;input&quot;:&quot;a&quot;},&quot;getRule&quot;:[{&quot;end&quot;:&quot;true&quot;}]}]}"/>
      </extensionElements>
    </userTask>
    <exclusiveGateway id="sid-A3100DEE-A0D4-41FB-9835-73BAA54DE4D0"/>
    <serviceTask id="sid-229B1F70-1934-479E-9699-AC233BB59AC2" name="推送财管部相关人员（监控）待阅" activiti:class="com.cgws.fintech.institution.crc.workbench.service.impl.CirculatedServiceImpl">
      <extensionElements>
        <activiti:field name="circulatedRoleId">
          <activiti:string><![CDATA[27]]></activiti:string>
        </activiti:field>
      </extensionElements>
    </serviceTask>
    <sequenceFlow id="sid-1E459463-928E-4EA3-A1CC-256D85353D5F" sourceRef="startEvent1" targetRef="sid-A63ADD5F-D101-4308-8DDC-80110EBB6C4A"/>
    <serviceTask id="sid-FD19BF1E-0D30-44DA-956A-BB6639B4F82B" name="推送合规部负责人待阅" activiti:class="com.cgws.fintech.institution.crc.workbench.service.impl.CirculatedServiceImpl">
      <extensionElements>
        <activiti:field name="circulatedRoleId">
          <activiti:string><![CDATA[6]]></activiti:string>
        </activiti:field>
      </extensionElements>
    </serviceTask>
    <serviceTask id="sid-50DC3885-4879-4FC6-828B-76BB3BA07C58" name="推送财管部负责人待阅" activiti:class="com.cgws.fintech.institution.crc.workbench.service.impl.CirculatedServiceImpl">
      <extensionElements>
        <activiti:field name="circulatedRoleId">
          <activiti:string><![CDATA[18]]></activiti:string>
        </activiti:field>
        <activiti:field name="orgSearch">
          <activiti:string><![CDATA[88]]></activiti:string>
        </activiti:field>
        <activiti:field name="includeChild">
          <activiti:string><![CDATA[true]]></activiti:string>
        </activiti:field>
      </extensionElements>
    </serviceTask>
    <serviceTask id="sid-68FA7383-6669-4DD6-A14C-ACF2A57004D2" name="推送合规部相关人员（监控）待阅" activiti:class="com.cgws.fintech.institution.crc.workbench.service.impl.CirculatedServiceImpl">
      <extensionElements>
        <activiti:field name="circulatedRoleId">
          <activiti:string><![CDATA[5]]></activiti:string>
        </activiti:field>
      </extensionElements>
    </serviceTask>
    <sequenceFlow id="sid-B450C47E-212A-4194-B81B-5A6228B3D610" sourceRef="sid-229B1F70-1934-479E-9699-AC233BB59AC2" targetRef="sid-68FA7383-6669-4DD6-A14C-ACF2A57004D2"/>
    <sequenceFlow id="sid-B997BA74-F366-4E0C-AEFD-5DACE096716C" sourceRef="sid-68FA7383-6669-4DD6-A14C-ACF2A57004D2" targetRef="sid-50DC3885-4879-4FC6-828B-76BB3BA07C58"/>
    <sequenceFlow id="sid-FD43CE97-360D-457D-BB5E-E02A3F7C58AC" sourceRef="sid-50DC3885-4879-4FC6-828B-76BB3BA07C58" targetRef="sid-FD19BF1E-0D30-44DA-956A-BB6639B4F82B"/>
    <sequenceFlow id="sid-825CC29E-D11F-4825-8A65-295066554552" sourceRef="sid-FD19BF1E-0D30-44DA-956A-BB6639B4F82B" targetRef="sid-9E7EAD98-4CE4-4CC2-A9C3-2FAD61395C1B"/>
    <sequenceFlow id="sid-F4D49D08-1A10-40B6-B03F-9D0C9513F734" sourceRef="sid-A63ADD5F-D101-4308-8DDC-80110EBB6C4A" targetRef="sid-7DB62F0E-350E-4AC3-886E-AF8F04D2F248"/>
    <sequenceFlow id="sid-0AE47D07-5DD4-466A-A86B-ECF8D140016B" sourceRef="sid-7DB62F0E-350E-4AC3-886E-AF8F04D2F248" targetRef="sid-A3100DEE-A0D4-41FB-9835-73BAA54DE4D0"/>
    <sequenceFlow id="sid-1F5E54ED-1C83-47A7-9733-04ABC1593FDC" sourceRef="sid-A3100DEE-A0D4-41FB-9835-73BAA54DE4D0" targetRef="sid-A63ADD5F-D101-4308-8DDC-80110EBB6C4A">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[` + "${input=='b'}" + `]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-D0BA8806-C4C9-44D7-AE1D-CE55B05A769D" sourceRef="sid-A3100DEE-A0D4-41FB-9835-73BAA54DE4D0" targetRef="sid-229B1F70-1934-479E-9699-AC233BB59AC2">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[` + "${input=='a'}" + `]]></conditionExpression>
    </sequenceFlow>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_abnormal-bran-staff">
    <bpmndi:BPMNPlane bpmnElement="abnormal-bran-staff" id="BPMNPlane_abnormal-bran-staff">
      <bpmndi:BPMNShape bpmnElement="startEvent1" id="BPMNShape_startEvent1">
        <omgdc:Bounds height="30.0" width="30.0" x="134.38847972594715" y="0.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-A63ADD5F-D101-4308-8DDC-80110EBB6C4A" id="BPMNShape_sid-A63ADD5F-D101-4308-8DDC-80110EBB6C4A">
        <omgdc:Bounds height="80.0" width="100.0" x="99.38847972594715" y="135.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-9E7EAD98-4CE4-4CC2-A9C3-2FAD61395C1B" id="BPMNShape_sid-9E7EAD98-4CE4-4CC2-A9C3-2FAD61395C1B">
        <omgdc:Bounds height="28.0" width="28.0" x="501.0" y="0.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-7DB62F0E-350E-4AC3-886E-AF8F04D2F248" id="BPMNShape_sid-7DB62F0E-350E-4AC3-886E-AF8F04D2F248">
        <omgdc:Bounds height="80.0" width="100.0" x="99.38847972594715" y="345.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-A3100DEE-A0D4-41FB-9835-73BAA54DE4D0" id="BPMNShape_sid-A3100DEE-A0D4-41FB-9835-73BAA54DE4D0">
        <omgdc:Bounds height="40.0" width="40.0" x="129.38847972594715" y="530.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-229B1F70-1934-479E-9699-AC233BB59AC2" id="BPMNShape_sid-229B1F70-1934-479E-9699-AC233BB59AC2">
        <omgdc:Bounds height="80.0" width="100.0" x="465.0" y="510.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-FD19BF1E-0D30-44DA-956A-BB6639B4F82B" id="BPMNShape_sid-FD19BF1E-0D30-44DA-956A-BB6639B4F82B">
        <omgdc:Bounds height="80.0" width="100.0" x="465.0" y="90.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-50DC3885-4879-4FC6-828B-76BB3BA07C58" id="BPMNShape_sid-50DC3885-4879-4FC6-828B-76BB3BA07C58">
        <omgdc:Bounds height="80.0" width="100.0" x="465.0" y="225.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-68FA7383-6669-4DD6-A14C-ACF2A57004D2" id="BPMNShape_sid-68FA7383-6669-4DD6-A14C-ACF2A57004D2">
        <omgdc:Bounds height="80.0" width="100.0" x="465.0" y="360.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge bpmnElement="sid-1F5E54ED-1C83-47A7-9733-04ABC1593FDC" id="BPMNEdge_sid-1F5E54ED-1C83-47A7-9733-04ABC1593FDC">
        <omgdi:waypoint x="168.88847972594715" y="550.5"/>
        <omgdi:waypoint x="299.75" y="550.5"/>
        <omgdi:waypoint x="299.75" y="175.0"/>
        <omgdi:waypoint x="199.38847972594715" y="175.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-FD43CE97-360D-457D-BB5E-E02A3F7C58AC" id="BPMNEdge_sid-FD43CE97-360D-457D-BB5E-E02A3F7C58AC">
        <omgdi:waypoint x="515.0" y="225.0"/>
        <omgdi:waypoint x="515.0" y="170.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-0AE47D07-5DD4-466A-A86B-ECF8D140016B" id="BPMNEdge_sid-0AE47D07-5DD4-466A-A86B-ECF8D140016B">
        <omgdi:waypoint x="149.5093256473973" y="425.0"/>
        <omgdi:waypoint x="149.8278736653411" y="530.439393939394"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-1E459463-928E-4EA3-A1CC-256D85353D5F" id="BPMNEdge_sid-1E459463-928E-4EA3-A1CC-256D85353D5F">
        <omgdi:waypoint x="149.38847972594715" y="30.0"/>
        <omgdi:waypoint x="149.38847972594715" y="135.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-B450C47E-212A-4194-B81B-5A6228B3D610" id="BPMNEdge_sid-B450C47E-212A-4194-B81B-5A6228B3D610">
        <omgdi:waypoint x="515.0" y="510.0"/>
        <omgdi:waypoint x="515.0" y="440.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-D0BA8806-C4C9-44D7-AE1D-CE55B05A769D" id="BPMNEdge_sid-D0BA8806-C4C9-44D7-AE1D-CE55B05A769D">
        <omgdi:waypoint x="168.91453485441062" y="550.4739448715366"/>
        <omgdi:waypoint x="465.0" y="550.0684722300223"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-B997BA74-F366-4E0C-AEFD-5DACE096716C" id="BPMNEdge_sid-B997BA74-F366-4E0C-AEFD-5DACE096716C">
        <omgdi:waypoint x="515.0" y="360.0"/>
        <omgdi:waypoint x="515.0" y="305.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-825CC29E-D11F-4825-8A65-295066554552" id="BPMNEdge_sid-825CC29E-D11F-4825-8A65-295066554552">
        <omgdi:waypoint x="515.0" y="90.0"/>
        <omgdi:waypoint x="515.0" y="28.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-F4D49D08-1A10-40B6-B03F-9D0C9513F734" id="BPMNEdge_sid-F4D49D08-1A10-40B6-B03F-9D0C9513F734">
        <omgdi:waypoint x="149.38847972594715" y="215.0"/>
        <omgdi:waypoint x="149.38847972594715" y="345.0"/>
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>
`, err => {
        if (err) {

        }
      });

    });
    const config: CurdBaseInterface = {
      filter: {
        item: [
          {
            label: "名称",
            type: "input",
            name: "username",
            defaultValue: "",
            placeholder: "请输入",
          },
          {
            label: "名称2",
            type: "select",
            placeholder: "请输入1",
            options: [
              {label: "1", value: "1"},
              {label: "2", value: "2"},
            ],
            name: "a2",
          },
        ],
        addBtn: add,
        exporBtn: exportUser,
      },
      table: {
        columns: [
          {
            title: "姓名",
            dataIndex: "username",
            key: "username",
          },
          {
            title: "角色名称",
            dataIndex: "sysRoles.name",
            key: 'tags',
          },
          {
            title: "name",
            dataIndex: "name",
            key: 'name',
          },
          {
            title: "城市",
            dataIndex: "city",
            key: "city",
          },
          {
            title: "email",
            dataIndex: "email",
            key: "email",
          },
          {
            title: "操作",
            dataIndex: "action",
            key: "action",
          },
        ],
        http: getCurdlist,
        deleteFn: delUser,
        editFn: editFn,
      },
    };


    return {
      config,
      handleOk,
      visible,
      RefTestComponent,
      ...toRefs(State),
      isAdd
    };
  },
  components: {
    "curd-component": CurdComponent,
  },
});
</script>
